<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../pages/bill/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../pages/bill/css/billDetail.css" />
		<script src="../pages/bill/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../pages/bill/js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../pages/bill/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../pages/bill/js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="container">
			<header>
				<a href="javascript:history.back()" class="back"></a>
				<span>汪飞蝶</span>
			</header>
			<div class="content">
				<div class="topInfo">
					<div class="infoTime">
						<div class="timeFrom">
							从&nbsp;<span id="fromYear" class="purple">2017</span>年<span id="fromMonth" class="purple">03</span>月<i></i>
						</div>
						<div class="timeTo">
							从&nbsp;<span id="toYear" class="purple">2017</span>年<span id="toMonth" class="purple">04</span>月<i></i>
						</div>
						<div><input class="chk_1" type="checkbox" name="settleBill" id="settleBill" value="" checked="false" /><label for="settleBill"></label>仅显示欠缴</div>
						<div class="phone">
							Cell:<a href="javascript:;" id="phonenum">12345678901</a>
						</div>
					</div>
					<div class="line"></div>
					<div class="infoMoney">
						<p><span class="txt1">缴款率：</span><span class="txt2 green" id="jiaokuanlvnum">0.00%</span></p>
						<p><span class="txt1">应缴：</span><span class="txt2"><a id="yingjiaonum">0.00</a>元</span></p>
						<p><span class="txt1 green">已缴：</span><span class="txt2"><a class="green" id="yijiaonum">0.00</a>元</span></p>
						<p><span class="txt1 red">未缴：</span><span class="txt2"><a class="red" id="weijiaonum">0.00</a>元</span></p>
					</div>
				</div>
				<div class="billContent" id="wrapper">
					<div id="scroller">
						<ul class="display">
							<!--<li>
								<dl>
									<dt><img src="../pages/bill/img/money_add.png"/></dt>
									<dd>
										<p>NW17111 &nbsp;<span>汪飞碟</span></p>
										<p class="limitTime">2016-09-01至2016-09-30</p>
										<div class="yingjiao">
											<p>[应缴]</p>
											<p>4000.00元</p>
										</div>
										<div class="line"></div>

									</dd>
								</dl>
								<div class="weijiao">
									<p class="green">[已缴] 0.00元</p>
									<p class="red">[未缴] 4000.00元</p>
								</div>
								<div class="rowLine"></div>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--<script src="../pages/bill/js/billDetail.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			$(function() {
				//--------------获取url内容
				function getUrlParam(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					if(r != null)
						return unescape(r[2]);
					return null;
				}
				//--------------封装时间格式
				function dateTime(time) { //获取时间相关数据
					var now = new Date();
					var myDate = new Date(time);
					//获取时间戳
					var timestamp = new Date(time).getTime();
					//获取当前年
					var year = myDate.getFullYear();
					//获取当前月
					var month = myDate.getMonth() + 1;
					//获取当前日
					var date = myDate.getDate();
					var h = myDate.getHours(); //获取当前小时数(0-23)
					var m = myDate.getMinutes(); //获取当前分钟数(0-59)
					var s = myDate.getSeconds();
					//输出时间相关数据
					var time_local = year + '-' + month + "-" + date;
					return time_local;
				}

				var contract = decodeURI(getUrlParam('contract'));
				var beginSettle = decodeURI(getUrlParam('beginSettle'));
				var endSettle = decodeURI(getUrlParam('endSettle'));
				var topName = sessionStorage.getItem('topName');

				function init(contract, beginSettle, endSettle, topName) {
					$('header span').html(topName);
					var fromYear = beginSettle.substring(0, 4);
					var fromMonth = beginSettle.substring(4, 6);
					var toYear = endSettle.substring(0, 4);
					var toMonth = endSettle.substring(4, 6);

					$('#fromYear').html(fromYear);
					$('#fromMonth').html(fromMonth);
					$('#toYear').html(toYear);
					$('#toMonth').html(toMonth);
					
					if($('#settleBill').prop('checked')){//如果初始化页面的checkboc选中，取消，默认不勾选。
						$('#settleBill').prop('checked', false);
					}
					
					var LoadParam = {
						contract: contract,
						beginSettle: beginSettle,
						endSettle: endSettle
					};

					$.ajax({
						url: "querybycontract.thor",
						cache: false,
						data: {
							LoadParam: JSON.stringify(LoadParam)
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							var receiptRate = null;
							if(data.payTotal == 0) {
								receiptRate = 0.00;
							} else {
								receiptRate = data.payedTotal / data.payTotal;
							}

							$('#jiaokuanlvnum').html(receiptRate.toPercent());
							$('#yingjiaonum').html(data.payTotal);
							$('#yijiaonum').html(data.payedTotal);
							$('#weijiaonum').html(data.unpayedTotal);
							$('#phonenum').html(JSON.parse(localStorage.getItem("loginInfo")).telephone);
							$('#phonenum').attr('href','tel:'+JSON.parse(localStorage.getItem("loginInfo")).telephone);

							var subjects = data.subjects;
							for(var i = 0; i < subjects.length; i++) {
								$('#scroller ul.display').append('<li>' +
									'<dl>' +
									'<dt><img src="../pages/bill/img/money_add.png"/></dt>' +
									'<dd>' +
									'<p>' + subjects[i].subject.code + ' &nbsp;<span>' + subjects[i].subject.name + '</span></p>' +
									'<p class="limitTime">' + dateTime(subjects[i].beginDate) + '至' + dateTime(subjects[i].endDate) + '</p>' +
									'<div class="yingjiao">' +
									'<p>[应缴]</p>' +
									'<p>' + subjects[i].payTotal + '元</p>' +
									'</div>' +
									'<div class="line"></div>' +
									'</dd>' +
									'</dl>' +
									'<div class="weijiao">' +
									'<p class="green">[已缴] <span class="yjnum green">' + subjects[i].payedTotal + '</span>元</p>' +
									'<p class="red">[未缴] <span class="wjnum red">' + subjects[i].unpayedTotal + '</span>元</p>' +
									'</div>' +
									'<div class="rowLine"></div>' +
									'</li>');

							}

						},
						error: function(data) {
							var data = JSON.stringify(data)
							layer.msg("查询失败")
						}
					});
				}
				init(contract, beginSettle, endSettle, topName);

				//--------------是否显示结清账户
				$('#settleBill').change(function() {
					var count = 0;
					if($('#settleBill').prop('checked')) {
						$('#scroller ul.display li').each(function() {
							var self = this;
							if(parseInt($(self).find('span.wjnum').text()) <= 0) {
								count += Number($(self).find('span.yjnum').text())*100;
								$(self).hide();
							}
						})
//						var jiaofeilv = 0.00;
//						$('#yijiaonum').html((Number($('#yijiaonum').text())*100 - count)/100);
//						if(Number($('#yingjiaonum').text()>0)){
//							jiaofeilv = Number($('#yijiaonum').text())/Number($('#yingjiaonum').text());
//						}
//						$('#jiaokuanlvnum').html(jiaofeilv.toPercent());
					} else {
						$('#scroller ul.display li').each(function() {
							var self = this;
							if(parseInt($(self).find('span.wjnum').text()) <= 0) {
								count += Number($(self).find('span.yjnum').text())*100;
								$(self).show();
							}
						})
//						var jiaofeilv = 0.00;
//						$('#yijiaonum').html((Number($('#yijiaonum').text())*100 + count)/100);
//						if(Number($('#yingjiaonum').text()>0)){
//							jiaofeilv = Number($('#yijiaonum').text())/Number($('#yingjiaonum').text());
//						}
//						$('#jiaokuanlvnum').html(jiaofeilv.toPercent());
					}
				})
			})
		</script>
	</body>

</html>